<template>
	<div class="LoginPwdUpdate">
		<v-header></v-header>
		<mt-field label="新密码" placeholder="请输入新密码" type="password" v-model="newPwd"></mt-field>
		<mt-field label="确认新密码" placeholder="请再次输入新密码" type="password" v-model="sNewPwd"></mt-field>
		<mt-field label="验证码" placeholder="请输入验证码" v-model="verifyCode">
			<span v-if="sendMsgDisabled" class="code-get">{{time + '秒后获取'}}</span>
			<span v-if="!sendMsgDisabled" class="code" @click="send">获取验证码</span>
		</mt-field>
		<div class="button-box">
			<mt-button type="default" size="large" @click.native="submitSure">确 认</mt-button>
		</div>
	</div>
</template>
<style>
	.LoginPwdUpdate{margin-top: 4rem;}
	.mint-field-other .code{color: #007AFF;font-size:1.3rem}
	.mint-field-other .code-get{background: #E0E0E0;padding:5px;color: #999;font-size:1.3rem}
	.mint-button--default {background-color: #cecece;}
	.button-box{padding: 10px;margin-top:20px;}
    .mint-button {font-size: 1.3rem;}
	
</style>
<script>
	import router from './../../router';
	import util from './../../js/util/util.js';
	import vHeader from './../common/Header.vue';
	import { Cell ,Toast } from 'mint-ui';
	export default {
		data() {
			return {
				time: 60, // 发送验证码倒计时
				userData: {},
				phoneNum: '',
				verifyCode: '',
				newPwd:'',
				sNewPwd:'',
				sendMsgDisabled: false,
				reg: /^(13[0-9]|14[0-9]|15[0-9]|17[0-9]|18[0-9])\d{8}$/, //手机验证码
			}
		},
		created() {
			this.$store.state.headings = this.$router.history.current.name; //修改标题
			this.$store.state.isFooterShow = false; //显示底部导航
		},
		components: {
			vHeader,
			Toast,
			Cell
		},
		methods: {
			submitSure: function() { //确认
				let newPwd = this.newPwd;
				let sNewPwd = this.sNewPwd;
				let verifyCode = this.verifyCode;
				if(!newPwd || newPwd.length == 0) {
					this.$toast('请输入新密码！')
					return false;
				}
				if(!sNewPwd || sNewPwd.length == 0) {
					this.$toast('请再次输入新密码！')
					return false;
				}
				if(newPwd!=sNewPwd) {
					this.$toast('两次输入的密码不一致！')
					return false;
				}
				if(!verifyCode || verifyCode.length < 4) {
					this.$toast('请输入正确的六位数验证码！')
					return false;
				}
				util.Ajax('/userCentered/updateLoginPwd', "POST",{"password": newPwd, "sendMsg": verifyCode}, function(data) { //成功
					if(data) {
						if(data.code == "0") {
							Toast("保存成功");
						} else {
							Toast("保存失败");
						}
					}
				})
			},
			send: function() {
				let phoneNum = this.phoneNum;
				if(!phoneNum || phoneNum.length == 0) {
					this.$toast('请输入手机号！')
					return false;
				}
				if(!this.reg.test(phoneNum)) {
					this.$toast('手机号格式不正确！')
					return false;
				}
				let me = this;
				me.sendMsgDisabled = true;
				let interval = window.setInterval(function() {
					if((me.time--) <= 0) {
						me.time = 60;
						me.sendMsgDisabled = false;
						window.clearInterval(interval);
					}
				}, 1000);
				
				var ajax = util.createAJAX();  
				var method = "POST";  
				var url = '/sms/sendMsg?'; 
				ajax.open(method,url); 
				ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");  
				var content = 'phone='+phoneNum; 
//				var content = 'phone=18798798586'; 
				ajax.send(content);  
				ajax.onreadystatechange = function () {  
				    if(ajax.readyState == 4){  
				        if (ajax.status == 200){  
				            var tip = eval('('+ajax.responseText+')'); 
				            if(tip.code==404){
				            	Toast(tip.msg);
				            }
				        }  
				    }  
				}  
			}

		},
		mounted: function() { //加载完成后执行
			var $this = this;
			util.Ajax('/userCentered/getMemeberById', "POST", {}, function(data) { //成功
				if(data) {
					if(data.code == "0") {
						//赋值
						$this.userData = data.member;
						$this.phoneNum = data.member.phone;
					} else {
						Toast(data.msg);
					}
				}
			})
		}
	}
</script>
